// 项目根组件
import React, { lazy, Suspense } from 'react'
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom'

// 导入页面组件
import  Home  from "./pages/Home" 
// import CityList  from "./pages/CityList"
import Map  from "./pages/Map"
import HouseDetail  from "./pages/HouseDetail"
import Login  from "./pages/Login"
import Registe  from "./pages/Registe"
import AuthRoute  from "./components/AuthRoute"
import Favorate  from "./pages/Favorate"
import Rent  from "./pages/Rent"
import RentAdd  from "./pages/Rent/Add"
import Search  from "./pages/Rent/Search"

// 路由懒加载
const CityList = lazy( _ => import('./pages/CityList'))

function App() {
  return (
    <Router>
      <div className="App">
        {/* 在home组件内部进行下级路由嵌套，home组件就想当与之前的layout页面 */}
        {/* 因为默认是路由模糊匹配规则，所以展示Home下级路由组件时，home组件也会被展示 */}
        <Route path='/home' component={Home} />
        <Suspense fallback={<div>加载中</div>}>
        <Route path='/cityLst' component={CityList} />
        <Route path='/map' component={Map} />
        <Route path='/detail/:id' component={HouseDetail} />
        <Route path='/login' component={Login} />
        <Route path='/registe' component={Registe} />
        {/* <Route path='/favorate' component={Favorate} /> */}
        {/* 通过自定义路由实现路由守卫 */}
        <AuthRoute path='/favorate' component={Favorate} />
        <AuthRoute path='/rent' exact component={Rent} />
        <AuthRoute path='/rent/add'  component={RentAdd} />
        <AuthRoute path='/rent/search'  component={Search} />
        {/* <Route path='/detail' component={HouseDetail} /> */}
        {/* 默认路由 + 路由重定向 */}
        {/* render 自定义展示的内容，可以放jsx */}
        {/* Redirect 组件 改变浏览器url地址进行跳转 路由重定向 */}
        <Route exact  path="/" exact render={() => <Redirect to="/home/index"></Redirect>}></Route>
        </Suspense>
      </div> 
    </Router>
  )
}

export default App
